<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>
      <!-- <a href="/5、vue路由器.html#/index">首页</a>
      <a href="#">商品</a> -->
      <router-link to="/index">首页</router-link>
      <router-link to="/product">商品</router-link>

      <router-view></router-view>

    </div>
  </div>
</body>

<script src="./node_modules/vue/dist/vue.js"></script>
<!-- 1.安装vue-router路由
     2.引入vue-router文件

     3.要根据不同url链接到不同的页面， 需要使用模板实现， 将模板绑定对应的路由地址
-->
<script src="./node_modules/vue-router/dist/vue-router.js"></script>




<script type="text/javascript">
  let Index = Vue.component("index", {
    template: `<div>Hello，欢迎使用来到图灵商城！</div>`
  });
  let Product = Vue.component("product", {
    template: `<ul><li>1. Iphone11</li><li>2. 小米11</li></ul>`
  });

  // 4.使用路由管理模板， 将url跟模板进行绑定

  const router = new VueRouter({
    routes: [{
        path: "/index",
        component: Index
      },
      {
        path: "/product",
        component: Product
      },
    ]
  })


  var vm = new Vue({
    el: '#app',
    router
  })
</script>

</html>